<template>
    <Row style="height: 100%" class="">
        <Col span="5">
            <Menu active-name="overview" theme="dark" @on-select="goMenu">
                <MenuItem name="overview">
                    <Icon type="document-text"></Icon>
                    总揽
                </MenuItem>
                <MenuGroup title="直播设置">
                    <MenuItem name="edit">
                        <Icon type="document-text"></Icon>
                        编辑
                    </MenuItem>
                    <MenuItem name="liveGuide">
                        <Icon type="chatbubbles"></Icon>
                        引导页
                    </MenuItem>
                    <MenuItem name="viewCode">
                        <Icon type="chatbubbles"></Icon>
                        访问控制
                    </MenuItem>
                    <MenuItem name="liveTab">
                        <Icon type="chatbubbles"></Icon>
                        自定义菜单
                    </MenuItem>
                    <MenuItem name="chatroom">
                        <Icon type="chatbubbles"></Icon>
                        聊天室
                    </MenuItem>
                </MenuGroup>
                <MenuGroup title="内容管理">
                    <MenuItem name="replay">
                        <Icon type="heart"></Icon>
                        视频回看
                    </MenuItem>
                    <MenuItem name="comment">
                        <Icon type="heart"></Icon>
                        留言管理
                    </MenuItem>
                    <MenuItem name="dataStat">
                        <Icon type="heart"></Icon>
                        数据统计
                   </MenuItem>
                </MenuGroup>
            </Menu>
        </Col>
        <Col span="19">
        <div class="layout-content-main">
            <transition name="fade" mode="out-in">
                <router-view></router-view>
            </transition>
        </div>
        </Col>
    </Row>
</template>
<script>
    export default {
        data() {
            return {}
        },
        methods: {
            goMenu(name){
                this.$router.push({name:name})
            }
        }
    }
</script>
<style scoped lang="less">

    .layout-content{
        min-height: 200px;
        margin: 15px;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
    }


</style>